<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端代码规范 | Beiysd</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/assets/logo/pkp.png">
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?345ab2bf830dc5c68a96925eb1dd0b45";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <meta name="description" content="Live and Study.">
    
    <link rel="preload" href="/assets/css/0.styles.bd7bd1ca.css" as="style"><link rel="preload" href="/assets/js/app.17b6b866.js" as="script"><link rel="preload" href="/assets/js/3.16fca902.js" as="script"><link rel="preload" href="/assets/js/2.aa0e2402.js" as="script"><link rel="preload" href="/assets/js/63.607fa9fb.js" as="script"><link rel="prefetch" href="/assets/js/10.71654f5d.js"><link rel="prefetch" href="/assets/js/11.e3df8a38.js"><link rel="prefetch" href="/assets/js/12.f6e1589f.js"><link rel="prefetch" href="/assets/js/13.8ac48caf.js"><link rel="prefetch" href="/assets/js/14.2a93538f.js"><link rel="prefetch" href="/assets/js/15.ed5b285c.js"><link rel="prefetch" href="/assets/js/16.5e1e59d5.js"><link rel="prefetch" href="/assets/js/17.1da7896e.js"><link rel="prefetch" href="/assets/js/18.6f1b273c.js"><link rel="prefetch" href="/assets/js/19.30d92fa3.js"><link rel="prefetch" href="/assets/js/20.1068c4cc.js"><link rel="prefetch" href="/assets/js/21.f3d90412.js"><link rel="prefetch" href="/assets/js/22.a3c35868.js"><link rel="prefetch" href="/assets/js/23.3dfaf7a4.js"><link rel="prefetch" href="/assets/js/24.b7562cb8.js"><link rel="prefetch" href="/assets/js/25.94bbff07.js"><link rel="prefetch" href="/assets/js/26.9cbdf92e.js"><link rel="prefetch" href="/assets/js/27.e2189a25.js"><link rel="prefetch" href="/assets/js/28.12e893b0.js"><link rel="prefetch" href="/assets/js/29.ab1115c9.js"><link rel="prefetch" href="/assets/js/30.e2112157.js"><link rel="prefetch" href="/assets/js/31.76cdc758.js"><link rel="prefetch" href="/assets/js/32.c94896d8.js"><link rel="prefetch" href="/assets/js/33.0841fa36.js"><link rel="prefetch" href="/assets/js/34.831fd380.js"><link rel="prefetch" href="/assets/js/35.b0449875.js"><link rel="prefetch" href="/assets/js/36.30a8c074.js"><link rel="prefetch" href="/assets/js/37.1aec4dbc.js"><link rel="prefetch" href="/assets/js/38.ccd6cdf9.js"><link rel="prefetch" href="/assets/js/39.c10337d7.js"><link rel="prefetch" href="/assets/js/4.98a034f9.js"><link rel="prefetch" href="/assets/js/40.addec5bb.js"><link rel="prefetch" href="/assets/js/41.e3e62de0.js"><link rel="prefetch" href="/assets/js/42.ba7501f2.js"><link rel="prefetch" href="/assets/js/43.d8fa5ea0.js"><link rel="prefetch" href="/assets/js/44.d6dbcdb3.js"><link rel="prefetch" href="/assets/js/45.fe55507d.js"><link rel="prefetch" href="/assets/js/46.6af0f2df.js"><link rel="prefetch" href="/assets/js/47.0560a688.js"><link rel="prefetch" href="/assets/js/48.ab74b154.js"><link rel="prefetch" href="/assets/js/49.7ed2bcd8.js"><link rel="prefetch" href="/assets/js/5.2ca1c567.js"><link rel="prefetch" href="/assets/js/50.0f22d3af.js"><link rel="prefetch" href="/assets/js/51.ad770490.js"><link rel="prefetch" href="/assets/js/52.bc1bd98c.js"><link rel="prefetch" href="/assets/js/53.9ff88855.js"><link rel="prefetch" href="/assets/js/54.f2b42c40.js"><link rel="prefetch" href="/assets/js/55.3d551cd8.js"><link rel="prefetch" href="/assets/js/56.bbf7abd0.js"><link rel="prefetch" href="/assets/js/57.4b2fbc05.js"><link rel="prefetch" href="/assets/js/58.4ff6654e.js"><link rel="prefetch" href="/assets/js/59.92969875.js"><link rel="prefetch" href="/assets/js/6.f1011be9.js"><link rel="prefetch" href="/assets/js/60.4fb5be24.js"><link rel="prefetch" href="/assets/js/61.661f240d.js"><link rel="prefetch" href="/assets/js/62.d08a0fee.js"><link rel="prefetch" href="/assets/js/64.bfa429e4.js"><link rel="prefetch" href="/assets/js/65.e184bc74.js"><link rel="prefetch" href="/assets/js/7.28ea5937.js"><link rel="prefetch" href="/assets/js/8.d804616d.js"><link rel="prefetch" href="/assets/js/9.7977e413.js">
    <link rel="stylesheet" href="/assets/css/0.styles.bd7bd1ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/logo/pkq.png" alt="Beiysd" class="logo"> <span class="site-name can-hide">Beiysd</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://github.com/Beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://blog.csdn.net/weixin_40532650" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://github.com/Beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://blog.csdn.net/weixin_40532650" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前端</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>后端</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>随笔</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>杂谈</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>开发相关</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/notes/99-开发相关/前端代码规范.html" class="active sidebar-link">前端代码规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/99-开发相关/前端代码规范.html#一、编程规约" class="sidebar-link">一、编程规约</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/99-开发相关/前端代码规范.html#一-命名规范" class="sidebar-link">(一)命名规范</a></li><li class="sidebar-sub-header"><a href="/notes/99-开发相关/前端代码规范.html#二-html-规范-vue-template-同样适用" class="sidebar-link">(二)HTML 规范 （Vue Template 同样适用）</a></li><li class="sidebar-sub-header"><a href="/notes/99-开发相关/前端代码规范.html#三-css-规范" class="sidebar-link">(三) CSS 规范</a></li><li class="sidebar-sub-header"><a href="/notes/99-开发相关/前端代码规范.html#四-less-规范" class="sidebar-link">(四) LESS 规范</a></li><li class="sidebar-sub-header"><a href="/notes/99-开发相关/前端代码规范.html#五-javascript-规范" class="sidebar-link">(五) Javascript 规范</a></li></ul></li><li class="sidebar-sub-header"><a href="/notes/99-开发相关/前端代码规范.html#二、vue-项目规范" class="sidebar-link">二、Vue 项目规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/99-开发相关/前端代码规范.html#一-vue-编码基础" class="sidebar-link">(一) Vue 编码基础</a></li><li class="sidebar-sub-header"><a href="/notes/99-开发相关/前端代码规范.html#二-vue-项目目录规范" class="sidebar-link">(二) Vue 项目目录规范</a></li></ul></li></ul></li><li><a href="/notes/99-开发相关/开发注意事项.html" class="sidebar-link">开发注意事项</a></li></ul></section></li></ul> </aside> <main class="page"><h3 class="page_title">前端代码规范</h3> <ul class="uls"><li title="标签" class="lis"><img src="/assets/img/tag.f21efeeb.svg" class="icons">
    </li> <li title="更新时间" class="lis"><img src="/assets/img/clock.ffb2d0be.svg" class="icons">2021-04-16
    </li> <li title="浏览人数" class="lis"><img src="/assets/img/eye.e9087eed.svg" class="icons">0
    </li></ul>  <div class="theme-default-content content__default"><h3 id="前端代码规范"><a href="#前端代码规范" class="header-anchor">#</a> 前端代码规范</h3> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>百度上有各种各样的代码规范，此篇参考</p> <p><a href="https://zhuanlan.zhihu.com/p/250735334" target="_blank" rel="noopener noreferrer">阿里前端开发规范<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://www.cnblogs.com/whitewolf/p/4491447.html" target="_blank" rel="noopener noreferrer">JavaScript 规范<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <h3 id="前端代码规范-2"><a href="#前端代码规范-2" class="header-anchor">#</a> 前端代码规范</h3> <p>Front Standard Guide</p> <h3 id="前端-js-项目开发规范"><a href="#前端-js-项目开发规范" class="header-anchor">#</a> 前端 JS 项目开发规范</h3> <p>规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。</p> <p>引自《阿里规约》的开头片段：</p> <blockquote><p>现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规 表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说， 适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提 升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切 实提升系统稳定性，码出质量。</p></blockquote> <h2 id="一、编程规约"><a href="#一、编程规约" class="header-anchor">#</a> 一、编程规约</h2> <h3 id="一-命名规范"><a href="#一-命名规范" class="header-anchor">#</a> (一)命名规范</h3> <ul><li><p>1.1.1 项目命名</p> <p>全部采用小写方式， 以中划线分隔。</p> <p>正例：mall-management-system</p> <p>反例：mall_management-system / mallManagementSystem</p></li> <li><p>1.1.2 目录命名</p> <p>全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数</p> <p>正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc</p> <p>反例： script / style / demo_scripts / demoStyles / imgs / docs</p></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名</p></div> <p>正例： head-search / page-loading / authorized / notice-icon</p> <p>反例： HeadSearch / PageLoading</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使</p> <p>用 kebab-case 命名</p></div> <p>正例： page-one / shopping-car / user-management</p> <p>反例： ShoppingCar / UserManagement</p> <ul><li><p>1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名</p> <p>全部采用小写方式， 以中划线分隔</p> <p>正例： render-dom.js / signup.css / index.html / company-logo.png</p> <p>反例： renderDom.js / UserManagement.html</p></li> <li><p>1.1.4 命名严谨性</p> <p>代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。 说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用</p> <p>正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。</p> <p>反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3</p> <p>杜绝完全不规范的缩写，避免望文不知义：</p> <p>反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。</p></li></ul> <h3 id="二-html-规范-vue-template-同样适用"><a href="#二-html-规范-vue-template-同样适用" class="header-anchor">#</a> (二)HTML 规范 （Vue Template 同样适用）</h3> <ul><li><p>1.2.1 HTML 类型</p> <p>推荐使用 HTML5 的文档类型申明： .
（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。</p> <ul><li>规定字符编码</li> <li>IE 兼容模式</li> <li>规定字符编码</li> <li>doctype 大写</li> <li>正例：</li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>html<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">&quot;X-UA-Compatible&quot;</span> content<span class="token operator">=</span><span class="token string">&quot;IE=Edge&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">&quot;UTF-8&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span>Page title<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string">&quot;images/company-logo.png&quot;</span> alt<span class="token operator">=</span><span class="token string">&quot;Company&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ul><li><p>1.2.2 缩进</p> <p>缩进使用 2 个空格（一个 tab）</p> <p>嵌套的节点应该缩进。</p></li> <li><p>1.2.3 分块注释</p> <p>在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式</p></li> <li><p>1.2.4 语义化标签</p> <p>HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签</p> <p>正例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>header<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>header<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>footer<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>footer<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>反例</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li> <li><p>1.2.5 引号
使用双引号(&quot; &quot;) 而不是单引号(’ ') 。</p> <p>正例： &quot;&quot;</p> <p>反例： ''</p></li></ul> <h3 id="三-css-规范"><a href="#三-css-规范" class="header-anchor">#</a> (三) CSS 规范</h3> <ul><li><p>1.3.1 命名
类名使用小写字母，以中划线分隔
id 采用驼峰式命名
scss 中的变量、函数、混合、placeholder 采用驼峰式命名
ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称</p> <p>不推荐：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">.</span>fw<span class="token operator">-</span><span class="token number">800</span> <span class="token punctuation">{</span>
font<span class="token operator">-</span>weight<span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token punctuation">.</span>red <span class="token punctuation">{</span>
color<span class="token operator">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>推荐:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">.</span>heavy <span class="token punctuation">{</span>
font<span class="token operator">-</span>weight<span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token punctuation">.</span>important <span class="token punctuation">{</span>
color<span class="token operator">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div></li> <li><p>1.3.2 选择器</p> <ul><li>1)css 选择器中避免使用标签名</li></ul> <p>从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。</p> <ul><li>2)很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器， 你应该总是考虑直接子选择器。</li></ul> <p>不推荐:</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">.</span>content <span class="token punctuation">.</span>title <span class="token punctuation">{</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> <span class="token number">2</span>rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>推荐:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">.</span>content <span class="token operator">&gt;</span> <span class="token punctuation">.</span>title <span class="token punctuation">{</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> <span class="token number">2</span>rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li><p>1.3.3 尽量使用缩写属性</p> <p>不推荐：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>border<span class="token operator">-</span>top<span class="token operator">-</span>style<span class="token operator">:</span> none<span class="token punctuation">;</span>
font<span class="token operator">-</span>family<span class="token operator">:</span> palatino<span class="token punctuation">,</span> georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
font<span class="token operator">-</span>size<span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
line<span class="token operator">-</span>height<span class="token operator">:</span> <span class="token number">1.6</span><span class="token punctuation">;</span>
padding<span class="token operator">-</span>bottom<span class="token operator">:</span> <span class="token number">2</span>em<span class="token punctuation">;</span>
padding<span class="token operator">-</span>left<span class="token operator">:</span> <span class="token number">1</span>em<span class="token punctuation">;</span>
padding<span class="token operator">-</span>right<span class="token operator">:</span> <span class="token number">1</span>em<span class="token punctuation">;</span>
padding<span class="token operator">-</span>top<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>推荐：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>border<span class="token operator">-</span>top<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
font<span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token operator">/</span><span class="token number">1.6</span> palatino<span class="token punctuation">,</span> georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
padding<span class="token operator">:</span> <span class="token number">0</span> <span class="token number">1</span>em <span class="token number">2</span>em<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>1.3.4 每个选择器及属性独占一行</li></ul> <p>不推荐：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>button<span class="token punctuation">{</span>
width<span class="token operator">:</span><span class="token number">100</span>px<span class="token punctuation">;</span>height<span class="token operator">:</span><span class="token number">50</span>px<span class="token punctuation">;</span>color<span class="token operator">:</span>#fff<span class="token punctuation">;</span>background<span class="token operator">:</span>#<span class="token number">00</span>a0e9<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>推荐：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>button<span class="token punctuation">{</span>
width<span class="token operator">:</span><span class="token number">100</span>px<span class="token punctuation">;</span>
height<span class="token operator">:</span><span class="token number">50</span>px<span class="token punctuation">;</span>
color<span class="token operator">:</span>#fff<span class="token punctuation">;</span>
background<span class="token operator">:</span>#<span class="token number">00</span>a0e9<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul><li>1.3.5 省略 0 后面的单位</li></ul> <p>不推荐：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>div<span class="token punctuation">{</span>
padding<span class="token operator">-</span>bottom<span class="token operator">:</span> <span class="token number">0</span>px<span class="token punctuation">;</span>
margin<span class="token operator">:</span> <span class="token number">0</span>em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>推荐：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>div<span class="token punctuation">{</span>
padding<span class="token operator">-</span>bottom<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
margin<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>1.3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式</p> <p>不推荐：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>#header<span class="token punctuation">{</span>
padding<span class="token operator">-</span>bottom<span class="token operator">:</span> <span class="token number">0</span>px<span class="token punctuation">;</span>
margin<span class="token operator">:</span> <span class="token number">0</span>em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>推荐：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">.</span>header<span class="token punctuation">{</span>
padding<span class="token operator">-</span>bottom<span class="token operator">:</span> <span class="token number">0</span>px<span class="token punctuation">;</span>
margin<span class="token operator">:</span> <span class="token number">0</span>em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="四-less-规范"><a href="#四-less-规范" class="header-anchor">#</a> (四) LESS 规范</h3> <ul><li><p>1.4.1 代码组织</p></li> <li><p>1)将公共 less 文件放置在 style/less/common 文件夹</p></li></ul> <p>例:// color.less,common.less</p> <ul><li>2)按以下顺序组织</li></ul> <p>1、@import;</p> <p>2、变量声明;</p> <p>3、样式声明;</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>
@<span class="token keyword">import</span> <span class="token string">&quot;mixins/size.less&quot;</span><span class="token punctuation">;</span>

@<span class="token keyword">default</span><span class="token operator">-</span>text<span class="token operator">-</span>color<span class="token operator">:</span> #<span class="token number">333</span><span class="token punctuation">;</span>

<span class="token punctuation">.</span>page <span class="token punctuation">{</span>
width<span class="token operator">:</span> <span class="token number">960</span>px<span class="token punctuation">;</span>
margin<span class="token operator">:</span> <span class="token number">0</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li>1.4.2 避免嵌套层级过多</li></ul> <p>将嵌套深度限制在 3 级。对于超过 4 级的嵌套，给予重新评估。这可以避免出现过于详实的 CSS 选择器。</p> <p>避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于 20 行的嵌套规则出现</p> <p>不推荐：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">.</span>main<span class="token punctuation">{</span>
<span class="token punctuation">.</span>title<span class="token punctuation">{</span>
<span class="token punctuation">.</span>name<span class="token punctuation">{</span>
color<span class="token operator">:</span>#fff
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>推荐：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">.</span>main<span class="token operator">-</span>title<span class="token punctuation">{</span>
<span class="token punctuation">.</span>name<span class="token punctuation">{</span>
color<span class="token operator">:</span>#fff
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="五-javascript-规范"><a href="#五-javascript-规范" class="header-anchor">#</a> (五) Javascript 规范</h3> <ul><li><p>1.5.1 命名</p></li> <li><ol><li>采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束</li></ol> <p>反例：</p> <p>\\_name / name\\\\\\\\\\\\\\\\\_ / name$</p></li> <li><ol start="2"><li>方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。</li></ol> <p>正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>localValue <span class="token operator">/</span> <span class="token function">getHttpMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">/</span> inputUserId<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ul> <p><em>其中 method 方法命名必须是 动词 或者 动词+名词 形式</em></p> <p>正例：saveShopCarData /openShopCarInfoDialog</p> <p>反例：save / open / show / go</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><em>特此说明，增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）</em></p></div> <p>add / update / delete / detail / get</p> <p>附： 函数方法常用的动词:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">get</span> 获取<span class="token operator">/</span><span class="token keyword">set</span> 设置<span class="token punctuation">,</span>

add 增加<span class="token operator">/</span>remove 删除

create 创建<span class="token operator">/</span>destory 移除

start 启动<span class="token operator">/</span>stop 停止

open 打开<span class="token operator">/</span>close 关闭<span class="token punctuation">,</span>

read 读取<span class="token operator">/</span>write 写入

load 载入<span class="token operator">/</span>save 保存<span class="token punctuation">,</span>

create 创建<span class="token operator">/</span>destroy 销毁

begin 开始<span class="token operator">/</span>end 结束<span class="token punctuation">,</span>

backup 备份<span class="token operator">/</span>restore 恢复

<span class="token keyword">import</span> 导入<span class="token operator">/</span><span class="token keyword">export</span> 导出<span class="token punctuation">,</span>

split 分割<span class="token operator">/</span>merge 合并

inject 注入<span class="token operator">/</span>extract 提取<span class="token punctuation">,</span>

attach 附着<span class="token operator">/</span>detach 脱离

bind 绑定<span class="token operator">/</span>separate 分离<span class="token punctuation">,</span>

view 查看<span class="token operator">/</span>browse 浏览

edit 编辑<span class="token operator">/</span>modify 修改<span class="token punctuation">,</span>

select 选取<span class="token operator">/</span>mark 标记

copy 复制<span class="token operator">/</span>paste 粘贴<span class="token punctuation">,</span>

undo 撤销<span class="token operator">/</span>redo 重做

insert 插入<span class="token operator">/</span><span class="token keyword">delete</span> 移除<span class="token punctuation">,</span>

add 加入<span class="token operator">/</span>append 添加

clean 清理<span class="token operator">/</span>clear 清除<span class="token punctuation">,</span>

index 索引<span class="token operator">/</span>sort 排序

find 查找<span class="token operator">/</span>search 搜索<span class="token punctuation">,</span>

increase 增加<span class="token operator">/</span>decrease 减少

play 播放<span class="token operator">/</span>pause 暂停<span class="token punctuation">,</span>

launch 启动<span class="token operator">/</span>run 运行

compile 编译<span class="token operator">/</span>execute 执行<span class="token punctuation">,</span>

debug 调试<span class="token operator">/</span>trace 跟踪

observe 观察<span class="token operator">/</span>listen 监听<span class="token punctuation">,</span>

build 构建<span class="token operator">/</span>publish 发布

input 输入<span class="token operator">/</span>output 输出<span class="token punctuation">,</span>

encode 编码<span class="token operator">/</span>decode 解码

encrypt 加密<span class="token operator">/</span>decrypt 解密<span class="token punctuation">,</span>

compress 压缩<span class="token operator">/</span>decompress 解压缩

pack 打包<span class="token operator">/</span>unpack 解包<span class="token punctuation">,</span>

parse 解析<span class="token operator">/</span>emit 生成

connect 连接<span class="token operator">/</span>disconnect 断开<span class="token punctuation">,</span>

send 发送<span class="token operator">/</span>receive 接收

download 下载<span class="token operator">/</span>upload 上传<span class="token punctuation">,</span>

refresh 刷新<span class="token operator">/</span>synchronize 同步

update 更新<span class="token operator">/</span>revert 复原<span class="token punctuation">,</span>

lock 锁定<span class="token operator">/</span>unlock 解锁

check out 签出<span class="token operator">/</span>check <span class="token keyword">in</span> 签入<span class="token punctuation">,</span>

submit 提交<span class="token operator">/</span>commit 交付

push 推<span class="token operator">/</span>pull 拉<span class="token punctuation">,</span>

expand 展开<span class="token operator">/</span>collapse 折叠

begin 起始<span class="token operator">/</span>end 结束<span class="token punctuation">,</span>

start 开始<span class="token operator">/</span>finish 完成

enter 进入<span class="token operator">/</span>exit 退出<span class="token punctuation">,</span>

abort 放弃<span class="token operator">/</span>quit 离开

obsolete 废弃<span class="token operator">/</span>depreciate 废旧<span class="token punctuation">,</span>

collect 收集<span class="token operator">/</span>aggregate 聚集
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br></div></div><ul><li><ol start="3"><li>常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。</li></ol> <p>正例： MAX_STOCK_COUNT</p> <p>反例： MAX_COUNT</p></li> <li><p>1.5.2 代码格式</p></li> <li><ol><li>使用 2 个空格进行缩进</li></ol> <p>正例：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">&lt;</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  x <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  x <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li><ol start="2"><li>不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。</li></ol> <p>说明：任何情形，没有必要插入多个空行进行隔开。</p></li> <li><p>1.5.3 字符串</p> <p>统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：</p></li></ul> <p>正例:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;foo&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> testDiv <span class="token operator">=</span> <span class="token string">'&lt;div id=&quot;test&quot;&gt;&lt;/div&gt;'</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>反例:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;foo&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> testDiv <span class="token operator">=</span> <span class="token string">&quot;&lt;div id='test'&gt;&lt;/div&gt;&quot;</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>1.5.4 对象声明 1)使用字面值创建对象</li></ul> <p>正例： let user = {};</p> <p>反例： let user = new Object();</p> <ul><li><ol start="2"><li>使用字面量来代替对象构造器</li></ol> <p>正例：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  city<span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
user<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
user<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
user<span class="token punctuation">.</span>city <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>1.5.5 使用 ES6,7</li></ul> <p>必须优先使用 ES6,7 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。</p> <p>必须强制使用 ES6, ES7 的新语法，比如箭头函数、await/async ， 解构， let ， for…of 等等</p> <ul><li>1.5.6 括号</li></ul> <p>下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。</p> <p>正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>1.5.7 undefined 判断</li></ul> <p>永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断。</p> <p>正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> person <span class="token operator">===</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>person <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>1.5.8 条件判断和循环最多三层</li></ul> <p>条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。</p> <ul><li>1.5.9 this 的转换命名</li></ul> <p>对上下文 this 的引用只能使用’self’来命名</p> <ul><li>1.5.10 慎用 console.log</li></ul> <p>因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能</p> <h2 id="二、vue-项目规范"><a href="#二、vue-项目规范" class="header-anchor">#</a> 二、Vue 项目规范</h2> <h3 id="一-vue-编码基础"><a href="#一-vue-编码基础" class="header-anchor">#</a> (一) Vue 编码基础</h3> <p>vue 项目规范以 Vue 官方规范 （https://cn.vuejs.org/v2/style-guide/） 中的 A 规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。</p> <p>请仔仔细细阅读 Vue 官方规范，切记，此为第一步。</p> <ul><li><p>2.1.1. 组件规范</p></li> <li><ol><li>组件名为多个单词。</li></ol> <p>组件名应该始终是多个单词组成（大于等于 2），且命名规范为 KebabCase 格式。</p> <p>这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。</p> <p>正例：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&quot;TodoItem&quot;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&quot;Todo&quot;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&quot;todo-item&quot;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li><ol start="2"><li>组件文件名为 pascal-case 格式</li></ol> <p>正例：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>components<span class="token operator">/</span>
<span class="token operator">|</span><span class="token operator">-</span> my<span class="token operator">-</span>component<span class="token punctuation">.</span>vue
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>components<span class="token operator">/</span>
<span class="token operator">|</span><span class="token operator">-</span> myComponent<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> MyComponent<span class="token punctuation">.</span>vue
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li><ol start="3"><li>基础组件文件名为 base 开头，使用完整单词而不是缩写。</li></ol> <p>正例：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>components<span class="token operator">/</span>
<span class="token operator">|</span><span class="token operator">-</span> base<span class="token operator">-</span>button<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> base<span class="token operator">-</span>table<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> base<span class="token operator">-</span>icon<span class="token punctuation">.</span>vue
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>components<span class="token operator">/</span>
<span class="token operator">|</span><span class="token operator">-</span> MyButton<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> VueTable<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> Icon<span class="token punctuation">.</span>vue
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li><ol start="4"><li>和父组件紧密耦合的子组件应该以父组件名作为前缀命名</li></ol> <p>正例：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>components<span class="token operator">/</span>
<span class="token operator">|</span><span class="token operator">-</span> todo<span class="token operator">-</span>list<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> todo<span class="token operator">-</span>list<span class="token operator">-</span>item<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> todo<span class="token operator">-</span>list<span class="token operator">-</span>item<span class="token operator">-</span>button<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> user<span class="token operator">-</span>profile<span class="token operator">-</span>options<span class="token punctuation">.</span>vue （完整单词）
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>components<span class="token operator">/</span>
<span class="token operator">|</span><span class="token operator">-</span> TodoList<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> TodoItem<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> TodoButton<span class="token punctuation">.</span>vue
<span class="token operator">|</span><span class="token operator">-</span> UProfOpts<span class="token punctuation">.</span>vue （使用了缩写）
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li><ol start="5"><li>在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。</li></ol> <p>正例：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 在单文件组件、字符串模板和 <span class="token constant">JSX</span> 中 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>MyComponent <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Row<span class="token operator">&gt;</span><span class="token operator">&lt;</span>table <span class="token operator">:</span>column<span class="token operator">=</span><span class="token string">&quot;data&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>Row<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>my<span class="token operator">-</span>component <span class="token operator">/</span><span class="token operator">&gt;</span> <span class="token operator">&lt;</span>row<span class="token operator">&gt;</span><span class="token operator">&lt;</span>table <span class="token operator">:</span>column<span class="token operator">=</span><span class="token string">&quot;data&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>row<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li><ol start="6"><li>组件的 data 必须是一个函数
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。 因为如果直接是一个对象的话，子组件之间的属性值会互相影响。</li></ol></li></ul> <p>正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">&quot;jack&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  data<span class="token operator">:</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;jack&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li><ol start="7"><li>Prop 定义应该尽量详细</li></ol> <p>必须使用 camelCase 驼峰命名</p> <p>必须指定类型</p> <p>必须加上注释，表明其含义</p> <p>必须加上 required 或者 default，两者二选其一</p> <p>如果有业务需要，必须加上 validator 验证</p> <p>正例：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>props<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 组件状态，用于控制组件的颜色</span>
status<span class="token operator">:</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> String<span class="token punctuation">,</span>
required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token function-variable function">validator</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>
<span class="token string">'succ'</span><span class="token punctuation">,</span>
<span class="token string">'info'</span><span class="token punctuation">,</span>
<span class="token string">'error'</span>
<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 用户级别，用于显示皇冠个数</span>
userLevel：<span class="token punctuation">{</span>
type<span class="token operator">:</span> String<span class="token punctuation">,</span>
required<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><ul><li><ol start="8"><li>为组件样式设置作用域</li></ol> <p>正例：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn btn-close&quot;</span><span class="token operator">&gt;</span><span class="token constant">X</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 使用 <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">scoped</span><span class="token template-punctuation string">`</span></span> 特性 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style scoped<span class="token operator">&gt;</span>
  <span class="token punctuation">.</span>btn<span class="token operator">-</span>close <span class="token punctuation">{</span>
    background<span class="token operator">-</span>color<span class="token operator">:</span> red<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;btn btn-close&quot;</span><span class="token operator">&gt;</span><span class="token constant">X</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 没有使用 <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">scoped</span><span class="token template-punctuation string">`</span></span> 特性 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span>
  <span class="token punctuation">.</span>btn<span class="token operator">-</span>close <span class="token punctuation">{</span>
    background<span class="token operator">-</span>color<span class="token operator">:</span> red<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li><ol start="9"><li>如果特性元素较多，应该主动换行。
正例：</li></ol></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>MyComponent
  foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span>
  bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span>
  baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span>
  foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span>
  bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span>
  baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span>
  foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span>
  bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span>
  baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>MyComponent
  foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span>
  bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span>
  baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span>
  foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span>
  bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span>
  baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span>
  foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span>
  bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span>
  baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span>
  foo<span class="token operator">=</span><span class="token string">&quot;a&quot;</span>
  bar<span class="token operator">=</span><span class="token string">&quot;b&quot;</span>
  baz<span class="token operator">=</span><span class="token string">&quot;c&quot;</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ul><li>2.1.2. 模板中使用简单的表达式</li></ul> <p>组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。</p> <p>正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> normalizedFullName <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token comment">// 复杂表达式已经移入一个计算属性</span>
computed<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">normalizedFullName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>fullName<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">word</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> word<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> word<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>
       <span class="token punctuation">{</span><span class="token punctuation">{</span>
          fullName<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">word</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
             <span class="token keyword">return</span> word<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> word<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
           <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">}</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li>2.1.3 指令都使用缩写形式</li></ul> <p>指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)</p> <p>正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>input
@input<span class="token operator">=</span><span class="token string">&quot;onInput&quot;</span>
@focus<span class="token operator">=</span><span class="token string">&quot;onFocus&quot;</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>input
v<span class="token operator">-</span>on<span class="token operator">:</span>input<span class="token operator">=</span><span class="token string">&quot;onInput&quot;</span>
@focus<span class="token operator">=</span><span class="token string">&quot;onFocus&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>2.1.4 标签顺序保持一致</li></ul> <p>单文件组件应该总是让标签顺序保持为 `</p> <p>正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li><p>2.1.5 必须为 v-for 设置键值 key</p></li> <li><p>2.1.6 v-show 与 v-if 选择</p></li></ul> <p>如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。</p> <ul><li>2.1.7 script 标签内部结构顺序</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>components <span class="token operator">&gt;</span> props <span class="token operator">&gt;</span> data <span class="token operator">&gt;</span> computed <span class="token operator">&gt;</span> watch <span class="token operator">&gt;</span> filter <span class="token operator">&gt;</span> 钩子函数（钩子函数按其执行顺序） <span class="token operator">&gt;</span> methods
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li><p>2.1.8 Vue Router 规范</p></li> <li><ol><li>页面跳转数据传递使用路由参数</li></ol> <p>页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据，因为如果在 B</p> <p>页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。</p></li></ul> <p>正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> id <span class="token operator">=</span> <span class="token string">&quot; 123&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>\$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&quot;userCenter&quot;</span><span class="token punctuation">,</span> query<span class="token operator">:</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> id <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li><ol start="2"><li><p>使用路由懒加载（延迟加载）机制</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
path<span class="token operator">:</span> <span class="token string">'/uploadAttachment'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'uploadAttachment'</span><span class="token punctuation">,</span>
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
title<span class="token operator">:</span> <span class="token string">'上传附件'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/view/components/uploadAttachment/index.vue'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div></li></ol></li> <li><ol start="3"><li>router 中的命名规范</li></ol> <p>path、childrenPoints 命名规范采用 kebab-case 命名规范（尽量 vue 文件的目录结构保持一致，因为目录、文件名都是 kebab-case，这样很方便找到对应的文件）</p> <p>name 命名规范采用 KebabCase 命名规范且和 component 组件名保持一致！（因为要保持 keep-alive 特性，keep-alive 按照 component 的 name 进行缓存，所以两者必须高度保持一致）</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 动态加载</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> reload <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;/reload&quot;</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">&quot;reload&quot;</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> Main<span class="token punctuation">,</span>
    meta<span class="token operator">:</span> <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">&quot;动态加载&quot;</span><span class="token punctuation">,</span>
      icon<span class="token operator">:</span> <span class="token string">&quot;icon iconfont&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    children<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">&quot;/reload/smart-reload-list&quot;</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">&quot;SmartReloadList&quot;</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span>
          title<span class="token operator">:</span> <span class="token string">&quot;SmartReload&quot;</span><span class="token punctuation">,</span>
          childrenPoints<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
              title<span class="token operator">:</span> <span class="token string">&quot;查询&quot;</span><span class="token punctuation">,</span>
              name<span class="token operator">:</span> <span class="token string">&quot;smart-reload-search&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              title<span class="token operator">:</span> <span class="token string">&quot;执行reload&quot;</span><span class="token punctuation">,</span>
              name<span class="token operator">:</span> <span class="token string">&quot;smart-reload-update&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              title<span class="token operator">:</span> <span class="token string">&quot;查看执行结果&quot;</span><span class="token punctuation">,</span>
              name<span class="token operator">:</span> <span class="token string">&quot;smart-reload-result&quot;</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
          <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&quot;@/views/reload/smart-reload/smart-reload-list.vue&quot;</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div><ul><li><ol start="4"><li>router 中的 path 命名规范</li></ol> <p>path 除了采用 kebab-case 命名规范以外，必须以 / 开头，即使是 children 里的 path 也要以 / 开头。如下示例</p></li></ul> <p>目的：</p> <p>经常有这样的场景：某个页面有问题，要立刻找到这个 vue 文件，如果不用以/开头，path 为 parent 和 children 组成的，可能经常需要在 router 文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的组件 *</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
path<span class="token operator">:</span> <span class="token string">'/file'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'File'</span><span class="token punctuation">,</span>
component<span class="token operator">:</span> Main<span class="token punctuation">,</span>
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
title<span class="token operator">:</span> <span class="token string">'文件服务'</span><span class="token punctuation">,</span>
icon<span class="token operator">:</span> <span class="token string">'ios-cloud-upload'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
children<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
path<span class="token operator">:</span> <span class="token string">'/file/file-list'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'FileList'</span><span class="token punctuation">,</span>
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/file/file-list.vue'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
path<span class="token operator">:</span> <span class="token string">'/file/file-add'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'FileAdd'</span><span class="token punctuation">,</span>
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/file/file-add.vue'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
path<span class="token operator">:</span> <span class="token string">'/file/file-update'</span><span class="token punctuation">,</span>
name<span class="token operator">:</span> <span class="token string">'FileUpdate'</span><span class="token punctuation">,</span>
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/file/file-update.vue'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="二-vue-项目目录规范"><a href="#二-vue-项目目录规范" class="header-anchor">#</a> (二) Vue 项目目录规范</h3> <ul><li>2.2.1 基础</li></ul> <p>vue 项目中的所有命名一定要与后端命名统一。</p> <p>比如权限：后端 privilege, 前端无论 router , store, api 等都必须使用 privielege 单词！</p> <ul><li>2.2.2 使用 Vue-cli 脚手架</li></ul> <p>使用 vue-cli3 来初始化项目，项目名按照上面的命名规范。</p> <ul><li>2.2.3 目录说明</li></ul> <p>目录名按照上面的命名规范，其中 components 组件用大写驼峰，其余除 components 组件目录外的所有目录均使用 kebab-case 命名。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>src 源码目录
<span class="token operator">|</span><span class="token operator">--</span> api 所有 api 接口
<span class="token operator">|</span><span class="token operator">--</span> assets 静态资源，images<span class="token punctuation">,</span> icons<span class="token punctuation">,</span> styles 等
<span class="token operator">|</span><span class="token operator">--</span> components 公用组件
<span class="token operator">|</span><span class="token operator">--</span> config 配置信息
<span class="token operator">|</span><span class="token operator">--</span> constants 常量信息，项目所有 Enum<span class="token punctuation">,</span> 全局常量等
<span class="token operator">|</span><span class="token operator">--</span> directives 自定义指令
<span class="token operator">|</span><span class="token operator">--</span> filters 过滤器，全局工具
<span class="token operator">|</span><span class="token operator">--</span> datas 模拟数据，临时存放
<span class="token operator">|</span><span class="token operator">--</span> lib 外部引用的插件存放及修改文件
<span class="token operator">|</span><span class="token operator">--</span> mock 模拟接口，临时存放
<span class="token operator">|</span><span class="token operator">--</span> plugins 插件，全局使用
<span class="token operator">|</span><span class="token operator">--</span> router 路由，统一管理
<span class="token operator">|</span><span class="token operator">--</span> store vuex<span class="token punctuation">,</span> 统一管理
<span class="token operator">|</span><span class="token operator">--</span> themes 自定义样式主题
<span class="token operator">|</span><span class="token operator">--</span> views 视图目录
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> role role 模块名
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> <span class="token operator">|</span><span class="token operator">--</span> role<span class="token operator">-</span>list<span class="token punctuation">.</span>vue role 列表页面
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> <span class="token operator">|</span><span class="token operator">--</span> role<span class="token operator">-</span>add<span class="token punctuation">.</span>vue role 新建页面
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> <span class="token operator">|</span><span class="token operator">--</span> role<span class="token operator">-</span>update<span class="token punctuation">.</span>vue role 更新页面
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> <span class="token operator">|</span><span class="token operator">--</span> index<span class="token punctuation">.</span>less role 模块样式
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> <span class="token operator">|</span><span class="token operator">--</span> components role 模块通用组件文件夹
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> employee employee 模块
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><ul><li><ol><li>api 目录</li></ol> <p>文件、变量命名要与后端保持一致。</p> <p>此目录对应后端 API 接口，按照后端一个 controller 一个 api js 文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致。</p> <p>api 中的方法名字要与后端 api url 尽量保持语义高度一致性。</p> <p>对于 api 中的每个方法要添加注释，注释与后端 swagger 文档保持一致。</p> <p>正例：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>后端 url： EmployeeController<span class="token punctuation">.</span>java

<span class="token operator">/</span>employee<span class="token operator">/</span>add
<span class="token operator">/</span>employee<span class="token operator">/</span><span class="token keyword">delete</span><span class="token operator">/</span><span class="token punctuation">{</span>id<span class="token punctuation">}</span>
<span class="token operator">/</span>employee<span class="token operator">/</span>update
前端： employee<span class="token punctuation">.</span>js

<span class="token comment">// 添加员工</span>
<span class="token function-variable function">addEmployee</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">'/employee/add'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 更新员工信息</span>
<span class="token function-variable function">updateEmployee</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">'/employee/update'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 删除员工</span>
<span class="token function-variable function">deleteEmployee</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">employeeId</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">'/employee/delete/'</span> <span class="token operator">+</span> employeeId<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><ul><li><ol start="2"><li>assets 目录</li></ol> <p>assets 为静态资源，里面存放 images, styles, icons 等静态资源，静态资源命名格式为 kebab-case</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">|</span>assets
<span class="token operator">|</span><span class="token operator">--</span> icons
<span class="token operator">|</span><span class="token operator">--</span> images
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> background<span class="token operator">-</span>color<span class="token punctuation">.</span>png
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> upload<span class="token operator">-</span>header<span class="token punctuation">.</span>png
<span class="token operator">|</span><span class="token operator">--</span> styles
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul><li><ol start="3"><li>components 目录</li></ol> <p>此目录应按照组件进行目录划分，目录命名为 KebabCase，组件命名规则也为 KebabCase</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">|</span>components
<span class="token operator">|</span><span class="token operator">--</span> error<span class="token operator">-</span>log
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> index<span class="token punctuation">.</span>vue
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> index<span class="token punctuation">.</span>less
<span class="token operator">|</span><span class="token operator">--</span> markdown<span class="token operator">-</span>editor
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> index<span class="token punctuation">.</span>vue
<span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> index<span class="token punctuation">.</span>js
<span class="token operator">|</span><span class="token operator">--</span> kebab<span class="token operator">-</span><span class="token keyword">case</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li><ol start="4"><li>constants 目录</li></ol> <p>此目录存放项目所有常量，如果常量在 vue 中使用，请使用 vue-enum 插件(https://www.npmjs.com/package/vue-enum)</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>目录结构：

<span class="token operator">|</span>constants
<span class="token operator">|</span><span class="token operator">--</span> index<span class="token punctuation">.</span>js
<span class="token operator">|</span><span class="token operator">--</span> role<span class="token punctuation">.</span>js
<span class="token operator">|</span><span class="token operator">--</span> employee<span class="token punctuation">.</span>js
例子： employee<span class="token punctuation">.</span>js

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">EMPLOYEE_STATUS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token constant">NORMAL</span><span class="token operator">:</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
desc<span class="token operator">:</span> <span class="token string">'正常'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">DISABLED</span><span class="token operator">:</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
desc<span class="token operator">:</span> <span class="token string">'禁用'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">DELETED</span><span class="token operator">:</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
desc<span class="token operator">:</span> <span class="token string">'已删除'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">EMPLOYEE_ACCOUNT_TYPE</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token constant">QQ</span><span class="token operator">:</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
desc<span class="token operator">:</span> <span class="token string">'QQ 登录'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">WECHAT</span><span class="token operator">:</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
desc<span class="token operator">:</span> <span class="token string">'微信登录'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">DINGDING</span><span class="token operator">:</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
desc<span class="token operator">:</span> <span class="token string">'钉钉登录'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">USERNAME</span><span class="token operator">:</span> <span class="token punctuation">{</span>
value<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
desc<span class="token operator">:</span> <span class="token string">'用户名密码登录'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token constant">EMPLOYEE_STATUS</span><span class="token punctuation">,</span>
<span class="token constant">EMPLOYEE_ACCOUNT_TYPE</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br></div></div><ul><li><ol start="5"><li>router 与 store 目录</li></ol> <p>这两个目录一定要将业务进行拆分，不能放到一个 js 文件里。</p></li></ul> <p>router 尽量按照 views 中的结构保持一致</p> <p>store 按照业务进行拆分不同的 js 文件</p> <ul><li><ol start="6"><li>views 目录</li></ol></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  命名要与后端、router、api 等保持一致
  components 中组件要使用 PascalCase 规则
  <span class="token operator">|</span><span class="token operator">--</span> views 视图目录
  <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> role role 模块名
  <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> role<span class="token operator">-</span>list<span class="token punctuation">.</span>vue role 列表页面
  <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> role<span class="token operator">-</span>add<span class="token punctuation">.</span>vue role 新建页面
  <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> role<span class="token operator">-</span>update<span class="token punctuation">.</span>vue role 更新页面
  <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> index<span class="token punctuation">.</span>less role 模块样式
  <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> components role 模块通用组件文件夹
  <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> role<span class="token operator">-</span>header<span class="token punctuation">.</span>vue role 头部组件
  <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> role<span class="token operator">-</span>modal<span class="token punctuation">.</span>vue role 弹出框组件
  <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> employee employee 模块
  <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> behavior<span class="token operator">-</span>log 行为日志 log 模块
  <span class="token operator">|</span> <span class="token operator">|</span><span class="token operator">--</span> code<span class="token operator">-</span>generator 代码生成器模块
  <span class="token number">2.2</span><span class="token number">.4</span> 注释说明
  整理必须加注释的地方
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><blockquote><p>公共组件使用说明
api 目录的接口 js 文件必须加注释
store 中的 state, mutation, action 等必须加注释
vue 文件中的 template 必须加注释，若文件较大添加 start end 注释
vue 文件的 methods，每个 method 必须添加注释
vue 文件的 data, 非常见单词要加注释</p></blockquote> <ul><li><p>2.2.5 其他</p></li> <li><ol><li>尽量不要手动操作 DOM</li></ol> <p>因使用 vue 框架，所以在项目开发中尽量使用 vue 的数据驱动更新 DOM，尽量（不到万不得已）不要手动操作 DOM，包括：增删改 dom 元素、以及更改样式、添加事件等。</p></li> <li><ol start="2"><li>删除无用代码</li></ol> <p>因使用了 git/svn 等代码版本工具，对于无用代码必须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码。</p></li></ul></div> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/notes/98-杂谈/最受欢迎.html" class="prev">
        最受欢迎
      </a></span> <span class="next"><a href="/notes/99-开发相关/开发注意事项.html">
        开发注意事项
      </a>
      →
    </span></p></div>  <button>click</button> <div class="back_top_content" data-v-26f75736><!----></div></main></div><div class="global-ui"><MySWUpdatePopup></MySWUpdatePopup></div></div>
    <script src="/assets/js/app.17b6b866.js" defer></script><script src="/assets/js/3.16fca902.js" defer></script><script src="/assets/js/2.aa0e2402.js" defer></script><script src="/assets/js/63.607fa9fb.js" defer></script>
  </body>
</html>
